<template>
  <d2-container>
    <div id="main">
      <div id="header">
        <el-select v-model="selectedTable" placeholder="请选择" @change="handleTableChange">
          <el-option
            v-for="item in tables"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <h1 style="display: inline; text-align: center; width: 100%; flex: 5">正在点餐</h1>
        <el-button style="flex: 1" @click="openPayDialog">结算</el-button>
      </div>
      <div id="container">
        <div id="category">
          <el-button class="category-item" @click="fetchPackageData">所有套餐</el-button>
          <el-button class="category-item" @click="fetchItemData(-1)">所有商品</el-button>
          <el-button v-for="i in category" :key="i.id" class="category-item" @click="fetchItemData(i.id)">{{ i.name }}
          </el-button>
        </div>
        <div id="food">
          <div v-for="i in item" :key="i.id" class="food-item" @click="openAddItemDialog(i)">
            <img :src=i.picture_urls alt="商品图片" height="200px">
            <div>
              <span style="color: #22705d">{{ i.name }}</span>
              <span>: {{ i.price }}¥</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    结算对话框-->
    <el-dialog
      v-if="cartOrder"
      title="结算"
      :visible.sync="payDialogVisible"
      width="70%"
      center
    >
      <div>
        <el-table
          :data="cartOrder"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="名称"
            width="200">
          </el-table-column>
          <el-table-column
            label="做法"
            width="200">
            <template v-slot="scope">
            <span v-for="(item, index) in scope.row.selectedOptions" :key="index">
              <div v-if="scope.row.type === 'item'">
                 <el-tag style="margin: 3px">{{ index }}{{ item }}</el-tag>
              </div>
             <div v-if="scope.row.type === 'package'">
               <div v-for="(ii, iindex) in item" :key=iindex>
                 <el-tag style="margin: 3px" type="danger">{{ ii.name }}</el-tag>
                 <span v-for="(iii, iiindex) in ii" :key="iiindex">
                 <el-tag v-if="iii !== ii.name" style="margin: 3px">
                   {{ iii }}
                 </el-tag>
                   </span>
               </div>
              </div>
            </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="200">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="数量"
            width="200">
          </el-table-column>
          <el-table-column
            prop="totalPrice"
            label="单件合计"
            width="200">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="payDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="payDialogConfirm">确 定</el-button>
    </span>
    </el-dialog>
    <!--    添加菜品对话框-->
    <el-dialog
      v-if="item4Add"
      title="添加菜品"
      :visible.sync="addItemDialogVisible"
      width="30%"
      center
    >
      <div style="display: flex">
        <div><img :src="item4Add.picture_urls" width="250px" alt="商品图片"></div>
        <div style="margin: 20px">
          <h1>{{ item4Add.name }}</h1>
          <div v-if="curType==='item'">
            <div v-for="(item, index) in item4Add.extra" :key="index">
              <cus-select-item-detail v-if="curType==='item'" :value='item'
                                      v-bind:model.sync='item4Add.selectedOptions[item.name]'></cus-select-item-detail>
            </div>
          </div>
          <div v-if="curType==='package'">
            <div v-for="(item, index) in item4Add.detail" :key="index">
              <cus-select-package-detail v-if="curType==='package'" :value='item'
                                         v-bind:model.sync='item4Add.selectedOptions[item.name]'></cus-select-package-detail>
            </div>
          </div>
          <el-input-number v-model="itemAmount" :min="0" label="数量"></el-input-number>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addItemDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addItemDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
export default {
  data () {
    return {
      category: [],
      selectCategoryId: undefined,
      item: [],
      tables: [
        {
          value: 1,
          label: '1号桌'
        },
        {
          value: 2,
          label: '2号桌'
        },
        {
          value: 3,
          label: '3号桌'
        },
        {
          value: 4,
          label: '4号桌'
        },
        {
          value: 5,
          label: '5号桌'
        }
      ],
      selectedTable: 1,
      payDialogVisible: false,
      addItemDialogVisible: false,
      item4Add: undefined,
      cart: {},
      cartOrder: undefined,
      itemAmount: 0,
      selectedOptions: {},
      curType: 'item'
    }
  },
  mounted () {
    this.fetchTableData()
    this.fetchCategoryData()
    this.fetchItemData(-1)
  },
  methods: {
    fetchPackageData () {
      this.curType = 'package'
      this.$api.modules['pms-package'].LIST({}).then(res => {
        this.item = res.data
        this.item.forEach(item => {
          item.detail = JSON.parse(item.detail)
          item.detail = item.detail.data
        })
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
      this.loading = false
    },
    fetchTableData () {
      this.$api.modules['pms-table'].LIST().then(res => {
        // console.log(res)
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
      this.loading = false
    },
    fetchCategoryData () {
      this.$api.modules['pms-category'].LIST().then(res => {
        this.category = res.data
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
      this.loading = false
    },
    fetchItemData (categoryId) {
      this.curType = 'item'
      const data = {}
      if (categoryId !== -1) {
        data.category_id = categoryId
      }
      this.$api.modules['pms-item'].LIST(data).then(res => {
        this.item = res.data
        this.item.forEach(item => {
          item.extra = JSON.parse(item.extra)
          item.extra = item.extra.data
        })
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
      this.loading = false
    },
    openAddItemDialog (item) {
      this.addItemDialogVisible = true
      this.item4Add = item
      this.$set(this.item4Add, 'selectedOptions', {})
      if (this.curType === 'item') {
        this.item4Add.extra.forEach(item => {
          this.$set(this.item4Add.selectedOptions, item.name, [])
        })
      } else {
        this.item4Add.detail.forEach(item => {
          this.$set(this.item4Add.selectedOptions, item.name, [])
        })
      }
      if (this.cart[item.id] === undefined) {
        this.cart[item.id] = {
          ...item,
          amount: 0,
          type: this.curType
        }
      }
      this.itemAmount = this.cart[item.id].amount
    },
    addItemDialogConfirm () {
      this.cart[this.item4Add.id].totalPrice = this.itemAmount * this.item4Add.price
      this.cart[this.item4Add.id].selectedOptions = this.item4Add.selectedOptions
      const data = {
        id: this.selectedTable,
        ItemId: this.item4Add.id,
        amount: this.itemAmount,
        detail: JSON.stringify({ ...this.cart[this.item4Add.id] })
      }
      this.$api.modules['pms-cart'].ADD(data).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
      // console.log(JSON.parse(this.cart[this.item4Add.id]))
      this.loading = false
      this.addItemDialogVisible = false
    },
    openPayDialog () {
      this.payDialogVisible = true
      const data = {
        id: this.selectedTable
      }
      this.$api.modules['pms-cart'].LIST(data).then(res => {
        const cartOrder = []
        for (const key in res.data[0]) {
          cartOrder.push(JSON.parse(res.data[0][key]))
        }
        this.cartOrder = cartOrder
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    payDialogConfirm () {
      const data = {
        id: this.selectedTable
      }
      this.$api.modules['oms-order'].ADD(data).then(res => {
        // console.log(res)
        this.payDialogVisible = false
        this.$message({
          message: '订单已结算',
          type: 'success'
        })
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
      this.loading = false
    },
    handleTableChange () {
      this.cart = {}
    }
  }
}
</script>

<style scoped>
#main {
  height: 100%;
}

#header {
  display: flex;
  width: 100%;
}

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#category {
  /*background-color: red;*/
  height: 100%;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.category-item {
  display: grid;
  place-items: center;
  margin: 20px;
  height: 50px;
  border-radius: 20px;
  /*background: antiquewhite;*/
}

#food {
  margin-top: 10px;
  height: 100%;
  width: 100%;
  display: grid;
  user-select: none;
  /*place-items: center;*/
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

.food-item {
  height: 230px;
  width: 200px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  /*width: 100%;*/
  /*background: burlywood;*/
  /*margin: 20px;*/
}

</style>
